<template>
	<view>
		<cu-custom v-if="customShow" bgColor="bg-fafafa" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">账号登录</block>
		</cu-custom>
		<scroll-view class="scrollPage bg-f7f7f7" scroll-y="true" :style="'height:'+(winHeight-barHeight)+'px'">
			<view class="login-logo">
				<image src="../../static/logo.png" style="width:230upx;height:230upx;"></image>
				<view class="text-baseColor text-30 text-bold" style="line-height:60upx;">XXX-CHAT</view>
			</view>
			<view class="padding-lg">
				<view class="solid-bottom">
					<input class="ipt" placeholder-class='iptp' type="text" @input="mobileInput" placeholder="输入账号/手机号码" />
				</view>
				<view class="solid-bottom">
					<input class="ipt" placeholder-class='iptp' type="text" @input="pwdInput" :password="showPassword" placeholder="输入密码" />
					<view class="showpwd" :class="[!showPassword ? 'icon-attentionfill' : 'icon-attention']" @click="changePassword"></view>
				</view>
			</view>

			<view class="padding-lg padding-top-sm padding-bottom flex justify-end" >
				<navigator style="text-align: right;" class="text-gray" hover-class="none" url="captcha">忘记密码?</navigator>
			</view>
			<view class="flex justify-center">
				<view class="text-gray flex align-center justify-center" style="font-size: 24upx;position: relative;">
					<view v-if="rule_tip" style="position: absolute;top:-80upx;left:0;" class="text-sm bg-black radius padding-xs user-rule-tip">
						<text>请阅读并勾选用户协议</text>
						<view class="down"></view>
					</view>
					<radio @click="accept_rule_change(accept_rule)" color="#14ac69" :checked="accept_rule==1?true:false" value="1"/>
					<text class="margin-left-xs">登录及代表您同意我们的</text>
					<text class="text-blue" @click="$util.toPage" data-url="../../pages1/login/agreement?t=1">《服务协议》</text>,
					<text class="text-blue" @click="$util.toPage" data-url="../../pages1/login/agreement?t=2">《隐私政策》</text>
				</view>
			</view>
			<view class="padding-lg">
				<button class="cu-btn block bg-them round text-bold lg" @click="mobileLogin" style="font-size:26upx;">
					登 录
				</button>
			</view>
		</scroll-view>
		
	</view>
</template>

<script>
	import {mapState,mapMutations} from 'vuex';
	import userObj from 'model/userModel.js';
	let me = null;
	export default {
		data() {
			return {
				customShow:0,
				barHeight: 0,
				showPassword: true,
				mobile: '',
				pwd: '',
				login_data: {},
				accept_rule:0,
				rule_tip:0
			};
		},
		onLoad() {
			me = this;
			this.barHeight = this.NativeBar;
			//#ifdef H5 || MP-BAIDU || MP-TOUTIAO || MP-WEIXIN
			this.customShow = 1;
			this.barHeight = this.CustomBar;
			//#endif
		},
		onShow() {},
		onReady() {
			//this.height = this.WindowHeight-this.CustomBar;
		},
		onHide() {},
		onUnload() {},
		onNavigationBarButtonTap(e) {
			uni.navigateTo({
				url: 'index'
			});
		},
		computed: {
			...mapState({
				navHeight: ({
					baseModule
				}) => baseModule.navHeight,
				winHeight: ({
					baseModule
				}) => baseModule.winHeight,
				dToken: ({
					baseModule
				}) => baseModule.dToken,
				dClientid: ({
					baseModule
				}) => baseModule.dClientid
			})
		},
		methods: {
			...mapMutations(['userModule/login']),
			accept_rule_change(val){
				this.accept_rule = (val==0?1:0);
				if(val==0){
					this.rule_tip = 0;
				}
			},
			mobileInput(event) {
				this.mobile = event.target.value
			},
			pwdInput(event) {
				this.pwd = event.target.value
			},
			mobileLogin() {
				
				if (this.mobile.length < 1) {
					uni.showToast({
						title: '请输入手机号',
						image: '../../static/error.png',
						duration: 1000
					});
					return false;
				}
				if (this.pwd.length < 1) {
					uni.showToast({
						title: '请输入密码',
						image: '../../static/error.png',
						duration: 1000
					});
					return false;
				}
				if(this.accept_rule==0){
					this.rule_tip=true;
					return false;
				}

				//#ifdef APP-PLUS 
				this.login_data = {
					username: this.mobile,
					password: this.pwd,
					dToken: me.dToken,
					dClientid: me.dClientid,
					version: plus.runtime.version,
					platform: plus.os.name,
					mobileModel: plus.device.model,
					mobileVendor: plus.device.vendor,
					platformVendor: plus.os.vendor,
					platformVersion: plus.os.version,
					platformLanguage: plus.os.language
				};
				//#endif

				//#ifndef APP-PLUS 
				this.login_data = {
					username: this.mobile,
					password: this.pwd
				};
				//#endif



				uni.showLoading({
					title: '正在登录'
				});
				userObj.loginByMobile(me,me.login_data).then(res=>{
					this.setUserInfo(res);
					this['userModule/login'](res);
					uni.navigateBack({delta: 2});
				}).catch(err=>{
					uni.showModal({
						title: '错误提示',
						content: err,
						showCancel: false
					});
				});	
				
			},
			changePassword() {
				this.showPassword = !this.showPassword;
			}
		}
	}
</script>

<style>
	.login-logo image {
		width: 160upx;
		height: 160upx;
		/* margin-top: 16upx; */
	}

	.login-logo {
		text-align: center;
	}

	.btn-list {
		position: absolute;
		width: 100%;
		bottom: 0;
	}

	.iptp {
		height: 100upx;
		line-height: 100upx;
	}

	.solid-bottom .ipt {
		height: 100upx;
		margin-top: 17.2upx;
		line-height: 100upx;
		padding-left: 20upx;
	}

	.solid-bottom:after {
		border-bottom-color: #ff659b;
	}

	.showpwd {
		width: 100upx;
		height: 100upx;
		position: absolute;
		right: 0;
		line-height: 100upx;
		text-align: center;
		bottom: 0;
		z-index: 100;
	}
</style>
